<template>
  <div class="show">
    <div class="img">
      <van-swipe>
        <van-swipe-item v-for="item in state.img">
          <img :src="item" alt="" class="slideshow">
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
    <div class="information">
      <div class="price">
        <span>￥{{ state.slideshow.price }}</span>

        <button @click="showPopup">3D样品</button>
        <van-popup v-model:show="show" round>
          <Show></Show>
        </van-popup>
      </div>
      <div class="name">
        <span>{{ state.slideshow.name }}</span>
        <van-icon name="like-o" />
      </div>
      <div class="rank">
        <span class="pink">满额权益</span>
        <span>正品保障</span>
        <van-icon name="arrow" />
      </div>
    </div>

    <div class="footer">
      <van-icon name="chat-o" />
      <van-icon name="cart-o" />
      <button class="add">加购物车</button>
      <button class="shop">立即购买</button>
    </div>
    <div class="return" @click="reto">
      <van-icon name="arrow-left" />
    </div>
  </div>
</template>

<script setup>
import Show from '../components/3d/3dshow.vue'
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from '../api/index.js'
import { reactive } from 'vue';
import { onBeforeMount } from 'vue';

const state = reactive({
  slideshow: {},
  img: []
})
const route = useRoute()
const id = route.query.id
console.log(id);
onBeforeMount(
  async () => {
    console.log('1111');
    const res = await axios.post('/show', { id: id })
    console.log('2222');
    state.slideshow = res.data[0]
    state.img.push(state.slideshow.img1)
    state.img.push(state.slideshow.img2)
    state.img.push(state.slideshow.img3)
    state.img.push(state.slideshow.img4)

    console.log(state.slideshow);
  }
)


const show = ref(false);
const showPopup = () => {
  show.value = true
}

const router = useRouter()
const reto = () => {
  router.push('./tabbar/shop')
}

</script>

<style lang="less" scoped>
.show {
  background: #eee;
  width: 100%;
  height: 100%;
  position: relative;
}

.img {
  width: 100%;

  img {
    height: 9rem;
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
}

.information {
  background: #fff;
  padding: 0.1rem 0.3rem;
  border-radius: 0 0 0.4rem 0.4rem;

  .price {
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0;

    span {
      font-size: 0.5rem;
      color: #ff279aec;
    }

    button {
      width: 4rem;
      height: 0.6rem;
      font-size: 0.4rem;
      color: #f71792fb;
      background: #f8d1e192;
      border-radius: 0.1rem;
      border: 1px solid #f8d1e192;
    }
  }

  .name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ccc;

    span {
      font-size: 0.4rem;
    }
  }

  .rank {
    height: 1rem;
    display: flex;
    align-items: center;
    position: relative;

    .pink {
      height: 0.6rem;
      line-height: 0.6rem;
      background: #ff279a58;
      padding: 0 0.1rem;
      color: #fe1d95be;
    }

    span {
      font-size: 0.3rem;
      padding-left: 0.1rem;
    }

    .van-icon {
      position: absolute;
      right: 0;
      font-size: 0.3rem;
      color: #ccc;
    }
  }
}

.footer {
  width: 100%;
  height: 2rem;
  position: fixed;
  bottom: 0;
  padding-bottom: 0.2rem;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0.2rem 0.2rem 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .shop,
  .add {
    width: 3rem;
    height: 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.4rem;
  }

  .add {
    color: #11c2dd;
    border: 1px solid #11c2dd;
    background: #fff;
  }

  .shop {
    background: #11c2dd;
    color: #fff;
    border: 1px solid #11c2dd;
  }

  .van-icon {
    color: #11c2dd;
    font-size: 0.8rem;
  }
}

.return {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  background: #eee;
  border-radius: 50%;

}
</style>